<template>
    <div class="bg">
        <div class="headView">
            <div class="infoView">
                一身转战三千里，一剑曾当百万师
            </div>
        </div>
        <div class="bodyView">
            <div class="bodyInfoView">

            </div>
        </div>
        <div class="listView">
            <div class="itemView" v-for="item in list" @click="tapItem(item)">
                <div class="img">
                    <div>
                        <h3>{{item.title}}</h3>
                    </div>
                    <img :src="item.mainImg" alt="">
                </div>
                <div class="contentView">
                    <div class="userbox">
                        <div class="userItem" v-if="item.author">
                            作者: {{item.author.name}}
                        </div>
                    </div>
                    <div class="content">
                        <div>{{item.content}}</div>
                    </div>
                    <div class="categoryList">
                        <div class="categoryItem" v-for="classItem in item.category">
                            {{classItem.title}}
                        </div>
                        <div class="categoryItem" v-if="item.category.length == 0">
                            暂无分类
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
	// @ is an alias to /src
	export default {
		name: 'Home',
		data() {
			return {
                list:[],
			}
		},
		created(){
	        this.getlist()
        },
        methods:{
			getlist(){
				let data = {

				}
				this.$api.req('get','http://127.0.0.1:8000/web/article',data).then((res)=>{

                    for (let i of res){
                    	let info = i.content
                    	info = info.replace(/<(?!img).*?>/g, "");
                    	i.content = info
                    }
					this.list = res
				})
            },
	        tapItem(item){
	        	this.$router.push({
			        path:'/article',
			        query:{
				        id:item.id
                    }
                })

            }
        }
	}
</script>
<style lang="scss" scoped>
    .bg {
        display: flex;
        flex-direction: column;
        /*background-color: $hoverBgColor;*/
    }

    .headView {
        background: linear-gradient(15deg, $mainColor 20%, #40c3ff 100%);
        height: 50vw;
        display: flex;
        justify-content: center;
        align-items: center;

        .infoView {
            font-size: 30px;
            color: $bgColor;
            font-weight: bold;
        }
    }

    .bodyView {
        padding: 60px;
        background-color: $hoverBgColor;
        .bodyInfoView {
            display: flex;
            padding: 15px;
            margin-top: -200px;
            border-radius: 5px;
            box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
            background-color: $bgColor;
            transition: 0.2s;
            &:hover {
                transform: scale(1.03);
                box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1);
            }
        }
    }

    .listView {
        background-color: $hoverBgColor;
        padding: 60px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .itemView {
        cursor: pointer;
        background-color: $bgColor;
        width: 350px;
        /*padding: 15px;*/
        margin: 5px;
        overflow: hidden;
        border-radius: 15px;
        margin-bottom: 30px;
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
        transition: 0.2s;
        transform: scale(1.0);
        display: flex;
        flex-direction: column;

        .contentView {
            display: flex;
            flex-direction: column;
            .userbox{
                display: flex;
                padding: 0 15px;
                margin-top: 15px;
                .userItem{
                    padding: 1px 10px;
                    color: $mainColor;
                    margin-right: 10px;
                    border-radius: 5px;
                    align-items: center;
                    font-size: 12px;
                    background-color: $bgColor;
                    border: 2px solid $mainColor;
                    transition: 0.2s;
                    cursor: pointer;
                    &:hover{
                        background-color: $mainColor;
                        color: $bgColor;
                    }
                    &:active{
                        transform: scale(0.95);
                    }
                }
            }
            .categoryList{
                display: flex;
                align-items: center;
                margin-bottom: 15px;
                padding: 0 15px;
                .categoryItem{
                    border: 2px solid $bgColor;
                    padding: 3px 10px;
                    background-color:$mainColor;
                    margin-right: 10px;
                    border-radius: 30px;
                    align-items: center;
                    font-size: 12px;
                    color: $bgColor;
                    transition: 0.2s;
                    cursor: pointer;
                    &:hover{
                        transform: scale(0.9);
                    }
                    &:active{
                        transform: scale(0.85);
                    }
                }
            }

            .content {
                color: #999999;
                padding: 15px;
                display: flex;
                div {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
            }

            span {
                border-top: 1px solid #eee;
                padding: 10px 15px;
                text-align: center;
                font-size: 14px;
                cursor: pointer;
                background-color: $bgColor;
                color: #226aff;
                transition: 0.2s;

                &:hover {
                    background-color: $hoverBgColor;
                }
            }
        }

        &:hover {
            transform: scale(1.05);
            box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1);
        }

        .img {
            width: 350px;
            height: 200px;
            position: relative;
            display: flex;
            &:hover{
                div{
                    background-color: rgba(0, 0, 0, 0.1);
                }
            }

            div {
                position: absolute;
                width: 100%;
                z-index: 99;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: flex-end;
                color: $bgColor;
                transition: 0.2s;

                h3 {
                    padding: 15px;
                }
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: fill;
            }
        }

    }
</style>